<template>
	<view class="swiperList">
		<swiper class="swiper" circular previous-margin="140rpx" next-margin="140rpx" :autoplay="autoplay" :interval="interval" :duration="duration" @change="swiperChange">
			<block v-for="(item,index) in productList" :key="index">
				<swiper-item class="swiperItem" @click="navToDetailPage(item)">
					<image class="itemImg" :src="item.pic" :class="swiperCurrent == index ? 'swiperActive': ''" ></image>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"top-swiper",
		props: {
			productList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 500,
				//当前index
				swiperCurrent: 0,
			};
		},
		methods: {
			//切换时触发
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			//详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/product?sku=${item.sku}`
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.swiperList {
		padding-top: 30rpx;
		background: $uni-bg-color;
	}
	
	.swiper {
		height: 500rpx;
		width: 100%;
	}
	
	.swiperItem {
		line-height: 460rpx;
		text-align: center;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}
	
	.itemImg {
		width: 80%;
		height: 400rpx;
		border-radius: 15rpx;
		z-index: 5;
		opacity: 0.7;
		top: 10%;
		box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
	}
	
	.swiperActive {
		width: 100%;
		height: 480rpx;
		opacity: 1;
		z-index: 10;
		top: 0%;
		transition: all .2s ease-in 0s;
	}
</style>
